
<template>
  <view :class="theme">
    <u-sticky bgColor="#11121b">
      <view style="background-color: #11121b;">
        <view class="fd-row bg-19 mt-40 mb-30 ml-30 mr-30 br-20" style="height: 80rpx;">
          <input @confirm="search" v-model="teams.search" confirm-type="search"
            class="f1 height-100percent pl-30 pr-30 fs-28 color-2" type="number" maxlength="11" placeholder="请输入手机号或用户ID"
            placeholder-class="color-14" />
          <view @click="search" class="fd-row ai-center">
            <view class="height-20 width-2 bg-8" />
            <text class="pl-30 pr-40 fs-28 color-5">搜索</text>
          </view>
        </view>
      </view>
    </u-sticky>
    <view class="main">
      <view v-for="(item, index) in teams.list" :key="index" class="bg-13 fd-row br-12 oh relative"
        style="margin: 0 30rpx 20rpx; padding: 30rpx 50rpx 30rpx 12rpx;">
        <u-image radius="50%" width="96" height="96" :src="item.avatar || `/static/logo.png`" />
        <view class="f1 ml-18">
          <label>
            <text class="color-2 fs-28 fw-500 mr-16">{{ item.nickname }}</text>
            <u-image v-if="item.vip > 0" width="130" height="54" :src="`/static/img/team/level-${item.vip}.png`" />
          </label>
          <view class="mt-30 f1 fd-row lh-3">
            <view class="f1">
              <text>
                <text class="color-17">直推总人数：</text>
                <text class="color-2">{{ item.direct_count || 0 }}</text>
              </text>
              <text>
                <text class="color-17">团队总人数：</text>
                <text class="color-2">{{ item.total_number || 0 }}</text>
              </text>
              <text>
                <text class="color-17">手机号码：</text>
                <text class="color-2">{{ item.mobile }}</text>
              </text>
            </view>
            <view>
              <text>
                <text class="color-17">直推实名人数：</text>
                <text class="color-2">{{ item.total_number_effective || 0 }}</text>
              </text>
              <text>
                <text class="color-17">团队实名人数：</text>
                <text class="color-2">{{ item.total_number_real || 0 }}</text>
              </text>
            </view>
          </view>
        </view>
        <label class="absolute right-0 top-0 bg-5 color-2 fs-20 fw-700"
          style="padding: 10rpx 20rpx; border-radius: 0 12rpx 0 12rpx;">{{ ["未", "已"][item.is_auth] }}实名</label>
      </view>
      <view class="mt-30 mb-30 ai-center">
        <u-image v-if="!teams.list.length" :showLoading="false" width="400" height="400" class="mt-60 mb-30"
          src="/static/img/blank.png" mode="aspectFit" />
        <u-loadmore :status="teams.cache.status" />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { reactive } from "vue";
import { debounce, pager } from "@/common/libs/utils";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";

const { theme } = useMapState(["theme"]);
const teams = reactive({
  page: 0,
  limit: 20,
  type: null,
  search: "",
  list: [] as any[],
  cache: {
    page: 1,
    list: [] as any[],
    status: "nomore"
  },
  next: false,
});

onLoad(() => {
  getTeams();
});

onReachBottom(() => {
  getTeams();
});

const getTeams = () => {
  pager({ url: "/directList", data: { query: teams.search } }, teams);
}

const search = debounce(() => {
  Object.assign(teams, {
    page: 0,
    list: [] as any[],
    cache: {
      page: 1,
      list: [] as any[],
      status: "nomore"
    },
    next: false,
  });
  getTeams();
});

</script>
<style>
page {
  background-color: #11121b;
}
</style>
<style lang="scss" scoped>
// scss
</style>